// pages/canvas/canvas.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isOpacity: true,
    deviceWidth: '',
    deviceHeight: '',

  },
  //生成图片 
  showImg: function () {
    var that = this;
    const ctx = wx.createCanvasContext('myCanvas');
    var imgPath = '../../img/icon-index/ver3-bg.png';
    var imgUserPath = '../../img/tou.jpg';
    var code = '../../img/1.png';
    //绘制图像到画布 x y width height
    ctx.drawImage(imgPath, 0, 0, (that.data.deviceWidth / 750) * 600, (that.data.deviceHeight / 1334) * 500);
    ctx.setFillStyle('white')
    //创建一个矩形
    ctx.fillRect(0, (that.data.deviceHeight / 1334) * 500, (that.data.deviceWidth / 750) * 600, (that.data.deviceHeight / 1334) * 350);
    //绘制图像到画布
    ctx.drawImage(imgUserPath, (that.data.deviceWidth / 750) * 30, (that.data.deviceHeight / 1334) * 530, (that.data.deviceWidth / 750) * 120, (that.data.deviceWidth / 750) * 120)

    //创建文字
    ctx.setFontSize((that.data.deviceWidth / 750) * 30)
    ctx.setFillStyle('#333333')
    //文案 x y
    ctx.fillText('毕竟1米八', (that.data.deviceWidth / 750) * 170, (that.data.deviceHeight / 1334) * 590)

    ctx.setFontSize((that.data.deviceWidth / 750) * 25)
    ctx.setFillStyle('#666666')
    ctx.fillText('Web前端攻城狮', (that.data.deviceWidth / 750) * 170, (that.data.deviceHeight / 1334) * 630)

    ctx.setFontSize((that.data.deviceWidth / 750) * 22)
    ctx.setFillStyle('#999999')
    ctx.fillText('长按识别图中二维码增加好友', (that.data.deviceWidth / 750) * 30, (that.data.deviceHeight / 1334) * 710)

    //绘制图像到画布
    ctx.drawImage(code, (that.data.deviceWidth / 750) * 470, (that.data.deviceHeight / 1334) * 540, (that.data.deviceWidth / 750) * 100, (that.data.deviceWidth / 750) * 100)
    //渲染
    ctx.draw()

    //需要把canvas转成图片后才能保存
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 600,
      height: 750,
      destWidth: 1200, //2倍关系
      destHeight: 1500, //2倍关系
      canvasId: 'myCanvas',
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          //关键 赋值给变量
          shareImgSrc: res.tempFilePath
        })
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
  //保存图片 
  saveImg: function () {
    var that = this;
    wx.saveImageToPhotosAlbum({
      //shareImgSrc为canvas赋值的图片路径
      filePath: that.data.shareImgSrc,
      success(res) {
        console.log(res);
        wx.showModal({
          title: '保存成功',
          content: '图片成功保存到相册了，去发圈噻~',
          showCancel: false,
          confirmText: '确认',
          confirmColor: '#21e6c1',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  //获取当前设备屏幕宽高 在onLoad生命周期里执行
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success(res) {
        console.log(res);
        console.log(res.windowWidth);
        console.log(res.windowHeight);
        that.setData({
          deviceWidth: res.windowWidth,
          deviceHeight: res.windowHeight
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})